<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="css/animate.css" />
		<link rel="stylesheet" type="text/css" href="css/main.css" />
		<script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/vue.js"></script>
		<title></title>
	</head>

	<body>
		<div id="main">
			<div class="home-page" id='loading'>
				<img src="img/loading.png" />
			</div>
			<div class="blue-bg">
				<img src="img/allbg.png" />
			</div>
			<div id="outside">
				<img src="img/outside.png" />
			</div>
			<transition name="caseone">
				<div class="home-page" v-show='caseone'>
					<img class="bg" src="img/outside.png" />
					<img class="bg" src="img/caseone.png" />
					<img class="star animated flash" src="img/start.png" />
					<img id='Arrow' class="Arrow animated flash" src="img/剪头.png" />
					<div id="clickone" class="bigmouse animated pulse"><img src="img/bigmouse.png" /></div>
					<div class="smallmouse animated tada"><img src="img/smallmouse.png" /></div>
				</div>
			</transition>
			<transition name="casetwo">
				<div class="home-page" v-show='casetwo'>
					<img class="bg" src="img/02img.png" />
					<img class="hand animated fadeInUp" src="img/WechatIMG148.png" />
					<transition name="firstthingshow">
						<img class="firstthing" v-show='handfirstthing' src="img/物件.png" />
					</transition>
					<transition name="handtopshow">
						<img v-show='handshow' class="handtop" src="img/handtop.png" />
					</transition>
					<transition name="handbottomshow">
						<img v-show='handbottomshow' class="handbottom" src="img/handbottom.png" />
					</transition>
					<transition name="text1show">
						<img v-show='text1show' class="text1" src="img/text1.png" />
					</transition>
				</div>
			</transition>
			<transition name="casethree">
				<div class="home-page" v-show='casethree'>
					<img class="bg" src="img/casethree.png" />
					<transition name="casethreetop">
						<img v-show='casethreetop' class="casethreetop" src="img/casetwotop.png" />
					</transition>
					<transition name="casethreebottom">
						<img v-show='casethreebottom' class="casethreebottom" src="img/casetwobottom.png" />
					</transition>
					<transition name="text2show">
						<img v-show='text2show' class="text2" src="img/text2.png" />
					</transition>
				</div>
			</transition>
			<transition name="casefour">
				<div class="home-page" v-show='casefour'>
					<img class="bg" src="img/casefour.png" />
					<transition name="casefourthing">
						<img class="casefourthing" v-show='casefourthing' src="img/casefourbg.png" />
					</transition>
					<transition name="casefourleft">
						<img v-show='casefourleft' class="casefourleft" src="img/casefourleft.png" />
					</transition>
					<transition name="casefourright">
						<img v-show='casefourright' class="casefourright" src="img/casefourright.png" />
					</transition>
					<transition name="text4show">
						<img v-show='text4show' class="text4" src="img/text4.png" />
					</transition>
				</div>
			</transition>
			<transition name="casefive">
				<div class="home-page" v-show='casefive'>
					<img class="bg" v-show="casefivebg" src="img/casefive.png" />
					<transition name="caseseven">
						<img v-show='casefiveself' class="casefiveself" src="img/casefivepeople.png" />
					</transition>
					<transition name="casefiveaunt1">
						<img v-show='casefiveaunt1' class="casefiveaunt1" src="img/casefiveaunt1.png" />
					</transition>
					<transition name="casefiveaunt2">
						<img v-show='casefiveaunt2' class="casefiveaunt2" src="img/casefiveaunt2.png" />
					</transition>
					<transition name="text5show">
						<img v-show='text5show' class="text5" src="img/text5.png" />
					</transition>
				</div>
			</transition>
			<transition name="casesix">
				<div class="home-page-casesix" v-show='casesix'>
					<img class="casesix" src="img/casesix.png" />
					<img v-show='casesixText' class="casesix-text" src="img/text6.png" />
				</div>
			</transition>
			<transition name="caseseven">
				<div class="home-page" v-show='caseseven'>
					<img class="bg" src="img/caseseven.png" />
				</div>
			</transition>
			<div v-show="caseseven" id='text7' class="text7 animated pulse"><img src="img/text7.png" /></div>
			<div class="home-page" v-show='caseseven2'>
				<img class="bg" src="img/caseseven2.png" />
			</div>
			<div class="home-page" v-show='caseseven3'>
				<img class="bg" src="img/caseseven3.png" />
			</div>
			<div class="home-page" v-show='caseseven4'>
				<img class="bg" src="img/caseseven4.png" />
			</div>
			<div class="home-page" v-show='caseseven5'>
				<img class="bg" src="img/caseseven5.png" />
			</div>
			<transition name="caseseven">
				<div class="home-page" v-show='caseeight'>
					<img class="bg" src="img/caseeightbg.png" />
					<div class="laststar animated swing"><img src="img/caseeightstar.png" /></div>
					<img v-show='text8' class="text8" src="img/text8.png" />
					<img id='lastbutton' class="lastbutton animated pulse" src="img/button.png" />
				</div>
			</transition>
		</div>
		<script src="js/hammer.min.2.0.8.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/main.js" type="text/javascript" charset="utf-8"></script>
	</body>

</html>